<template>

	<!--登录-->
	<div v-if="loginStore.state == false">
		<el-form :model="LoginInput" class="login-box">
			<h1 class="login-title">欢迎登录</h1>
			<h3 class="login-title">智汇优采超市管理系统</h3>
			<el-form-item label="账号" prop="name">
				<el-input v-model="LoginInput.InputUserName" type="text" placeholder="请输入用户名"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input v-model="LoginInput.InputUserPassword" type="password" placeholder="请输入密码"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="LoginClick" style="width: 100%;">登录</el-button>
			</el-form-item>
		</el-form>
	</div>

	<!--外层容器-->
	<el-container v-if="loginStore.state == true">

		<!--左侧栏容器，菜单-->
		<el-aside width="200px" style="overflow-y: hidden;">

			<!--左侧菜单顶部信息提示-->

			<!--时间和营业状态-->
			<div class="SideTimeCard">
				<span style="font-size: larger; font-weight: bolder; margin-bottom: -20px;">{{ nowShopState }}</span>
				<span style="font-size: small;">{{ `${nowTime.hour}:${nowTime.minute}:${nowTime.second}` }}</span>
			</div>

			<!--日期-->
			<div class="SideDateCard">
				<span>{{ `${nowDate.year}年${nowDate.month}月${nowDate.day}日` }}</span>
			</div>

			<!--侧边导航菜单-->
			<el-scrollbar :height="PageHeight">

				<!--菜单-->
				<el-menu :router="true">

					<!--子菜单1：商品管理模块-->
					<el-menu-item index="/MerchandisePage">
						<template #title><el-icon><Goods /></el-icon>商品管理</template>
					</el-menu-item>

					<!--子菜单2：销售管理模块-->
					<el-menu-item index="/SalesPage">
						<template #title><el-icon><Watermelon /></el-icon>销售管理</template>
					</el-menu-item>

					<!--子菜单3：会员管理模块-->
					<el-menu-item index="/MembershipPage">
						<template #title><el-icon><Star /></el-icon>会员管理</template>
					</el-menu-item>

					<!--子菜单4：仓库管理模块-->
					<el-menu-item index="/WarehousePage">
						<template #title><el-icon><TakeawayBox /></el-icon>仓库管理</template>
					</el-menu-item>

					<!--子菜单5：供应商管理模块-->
					<el-menu-item index="/SupplierPage">
						<template #title><el-icon><ShoppingCart /></el-icon>供应商管理</template>
					</el-menu-item>

					<!--子菜单6：员工管理模块-->
					<el-menu-item index="/EmployeePage">
						<template #title><el-icon><User /></el-icon>员工管理</template>
					</el-menu-item>

					<!--子菜单7：财务管理模块-->
					<el-menu-item index="/FinancePage">
						<template #title><el-icon><Coin /></el-icon>财务管理</template>
					</el-menu-item>

					<!--子菜单8：系统设置模块-->
					<el-menu-item index="/SettingPage">
						<template #title><el-icon><Operation /></el-icon>系统设置</template>
					</el-menu-item>
				</el-menu>
			</el-scrollbar>
		</el-aside>

		<!--右侧容器-->
		<el-container>

			<!--头部容器，标题-->
			<el-header class="AppHeader">
				<div>
					<span>智汇优采超市管理系统</span>
				</div>
				<el-button @click="ClickLogOut">退出登录</el-button>
			</el-header>

			<!--主要区域容器，显示其他组件页面内容-->
			<el-main>
				<RouterView></RouterView>
			</el-main>
		</el-container>
	</el-container>

</template>

<script lang='ts' setup name='App'>

// 导入必要的组件
import { ref, onMounted, watch } from "vue"
import { RouterView } from "vue-router"
import { ElMessage } from "element-plus"
import { useHourStore } from "./store/openHour"
import { useUserStore } from '@/store/user'
import { useLogin } from "@/store/login"
import axios from 'axios'
import { ElNotification, ElIcon } from 'element-plus';

let userStore = useUserStore()
let loginStore = useLogin()

loginStore.state = false

// 输入的数据
let LoginInput = ref({
	InputUserName: "",
	InputUserPassword: "",
})

// 登录回调
function LoginClick(){
	GetUser()
}

// GET: 查询密码
async function GetUser(){

	// url改
    try {
        const response = await axios.get(`/api/setting/${LoginInput.value.InputUserName}`);
		console.log(response.data.data)
		// 没查到
		if(response.data.data == undefined){
			ElNotification.error({ message: '没找到该账号' });
			return
		}

		// 找到了比对密码
		if(response.data.data.password!= LoginInput.value.InputUserPassword){
			ElNotification.error({ message: '用户名或密码错误' });
			return
		}

		// 登录成功，存入数据
		userStore.username = LoginInput.value.InputUserName
		userStore.password = LoginInput.value.InputUserPassword

		// 跳转
		loginStore.state = true

    } catch (error) {
        ElNotification.error({ message: '获取数据失败' });
    }
}

// 退出登录按钮
function ClickLogOut(){
	loginStore.state = false
	ElMessage('退出登录')
}

// 页面高度
let PageHeight = ref(500)

// 当前日期和时间输出值
let nowTime = ref({hour: 0, minute: 0, second: 0})
let nowDate = ref({year: 0, month: 0, day: 0})

// 营业时间
// let OpenHour = ref({open: 8, close: 21})
const hourStore = useHourStore()

// 营业状态
let nowShopState = ref("")

// 日期统一形式补零
const complement = function (value: any) {
	return value < 10 ? `0${value}` : value;
}

// 获取当前日期
const CurrentDate = (curDate: any) => {
	const date = new Date(curDate)
	const year = date.getFullYear()
	const month = complement(date.getMonth() + 1)
	const day = complement(date.getDate())
	return {year, month, day}
}

// 获取当前时间
const CurrentTime = (curTime: any) => {
	const time = new Date(curTime)
	const hour = complement(time.getHours())
	const minute = complement(time.getMinutes())
	const second = complement(time.getSeconds())
	return {hour, minute, second}
}

// 获取当前营业状态
const CurrentState = (hour: any) => {
if(
	hour >= hourStore.StartHour && 
	hour <= hourStore.CloseHour) {
		return "营业中"
	} else {
		return "闭店中"
	}
}

// 调用启动钩子获取初始数据
nowTime.value = CurrentTime(new Date())
nowDate.value = CurrentDate(new Date())
nowShopState.value = CurrentState(nowTime.value.hour)

// 营业状态提示
let MesInfo = ref("")
watch(nowShopState, (New, Old)=>{
	if(New == "营业中"){
		MesInfo.value = "进入营业时间"
	}
	else{
		MesInfo.value = "进入闭店时间"
	}
	ElMessage({showClose: true, message: MesInfo.value, type: 'warning',})
})

// 调用挂载钩子持续获取更新数据
onMounted(() => {
	setInterval(() => {
		nowTime.value = CurrentTime(new Date())
		nowDate.value = CurrentDate(new Date())
		nowShopState.value = CurrentState(nowTime.value.hour)
	})
});
  
</script>

<style scoped>

/* 头部容器标题 */
.AppHeader{
	display: flex;
	justify-content: space-between;
	padding-left: 10px;
	align-items: center;
	font-size: 20px;
	font-weight: bolder;
	height: 60px;
	background-color: #013568;
	color: aliceblue;
	margin-top: 2px;
	>div{
		display: flex;
		align-items: center;
	}
}

/* 左侧顶部时间卡片 */
.SideTimeCard{
	height: 60px;
	width: 150px;
	display: grid;
	place-items: center;
	margin: auto;
	border-style: solid;
	border-color: #a2a2a2a8;
	border-radius: 10px;
}

/* 左侧顶部日期卡片 */
.SideDateCard{
	height: 30px;
	width: 150px;
	display: grid;
	place-items: center;
	margin: auto;
	font-weight: bold;
	font-size: small;
}

/* 登录 */
.login-box {
	width: 350px;
	margin: 100px auto;
	border: 1px solid #DCDFE6;
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0 0 30px #DCDFE6;
}

/* 登录 */
.login-title {
	text-align: center;
}

</style>